<template>
  <div class="gauge-clean-wrapper" :style="containerStyle">
    <v-chart ref="chartRef" :option="chartOption" :style="chartStyle" autoresize />
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';
import { use } from 'echarts/core';
import * as echarts from 'echarts';
import { CanvasRenderer } from 'echarts/renderers';
import { GaugeChart } from 'echarts/charts';
import { TitleComponent, TooltipComponent, LegendComponent } from 'echarts/components';
import VChart from 'vue-echarts';
import { useAutoDataBinding } from '@/composables/use-data-binding';

// 注册ECharts组件
use([CanvasRenderer, GaugeChart, TitleComponent, TooltipComponent, LegendComponent]);

// Props定义
interface Props {
  value?: number;
  pointerColor?: string;
  centerColor?: string;
  labelColor?: string;
  lowColor?: string;
  mediumLowColor?: string;
  mediumHighColor?: string;
  highColor?: string;
  dataBinding?: any;
}

const props = withDefaults(defineProps<Props>(), {
  value: 70,
  pointerColor: '#52dd8c',
  centerColor: '#0264eb',
  labelColor: '#fff',
  lowColor: '#0060ea',
  mediumLowColor: '#0060ea',
  mediumHighColor: '#01bffb',
  highColor: '#007eef'
});

// 图表引用
const chartRef = ref<InstanceType<typeof VChart>>();

// 响应式属性（用于数据绑定）
const componentProps = computed(() => ({
  value: props.value,
  pointerColor: props.pointerColor,
  centerColor: props.centerColor,
  labelColor: props.labelColor,
  lowColor: props.lowColor,
  mediumLowColor: props.mediumLowColor,
  mediumHighColor: props.mediumHighColor,
  highColor: props.highColor
}));

// 数据绑定
const dataBinding = useAutoDataBinding(
  props.dataBinding?.enabled ? props.dataBinding : null,
  componentProps
);

// 样式计算
const containerStyle = computed(() => ({
  width: '100%',
  height: '100%',
  minHeight: '400px'
}));

const chartStyle = computed(() => ({
  width: '100%',
  height: '100%'
}));

// 简洁蓝色仪表盘配置
const chartOption = computed(() => {
  const value = componentProps.value.value;
  const pointerColor = componentProps.value.pointerColor;
  const centerColor = componentProps.value.centerColor;
  const labelColor = componentProps.value.labelColor;
  const lowColor = componentProps.value.lowColor;
  const mediumLowColor = componentProps.value.mediumLowColor;
  const mediumHighColor = componentProps.value.mediumHighColor;
  const highColor = componentProps.value.highColor;

  return {
    series: [
      {
        type: 'gauge',
        startAngle: 180,
        endAngle: 0,
        min: 0,
        max: 100,
        splitNumber: 5,
        axisLine: {
          lineStyle: {
            width: 2,
            color: [
              [0, lowColor],
              [0.2, mediumLowColor],
              [0.6, mediumHighColor],
              [0.8, mediumHighColor],
              [1, highColor]
            ]
          }
        },
        pointer: {
          width: 4,
          length: '70%'
        },
        itemStyle: {
          color: pointerColor
        },
        axisTick: {
          show: false,
          length: 12,
          lineStyle: {
            color: '#fff',
            width: 1
          }
        },
        splitLine: {
          show: false,
          length: 20,
          lineStyle: {
            color: 'auto',
            width: 5
          }
        },
        axisLabel: {
          color: labelColor,
          fontSize: 15,
          distance: -5,
          center: ['50%', '52%']
        },
        detail: {
          show: true,
          formatter: '{value}',
          color: labelColor,
          fontSize: 30,
          fontWeight: 'bold',
          offsetCenter: [0, '40%']
        },
        data: [
          {
            value: value
          }
        ],
        markPoint: {
          data: [
            {
              x: '50%',
              y: '50%',
              symbol: 'circle',
              symbolSize: 55,
              itemStyle: {
                color: centerColor
              }
            }
          ]
        }
      }
    ]
  };
});

onMounted(() => {
  // 确保图表可以正确响应尺寸变化
  if (chartRef.value) {
    // 延迟调用resize确保图表正确渲染
    setTimeout(() => {
      chartRef.value?.resize();
    }, 100);
  }
});
</script>

<style scoped>
.gauge-clean-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  border-radius: 8px;
}

.gauge-clean-wrapper > div {
  width: 100% !important;
  height: 100% !important;
}
</style>
